<template>
  <div>
    <!--坪效趋势-->
    <dc-cell title="坪效趋势" class="bg-white mt20"></dc-cell>
    <div class="common-chart" id="levelTrend"></div>
    <dc-cell title="开台率趋势" class="bg-white mt20"></dc-cell>
    <div class="common-chart" id="openTrend"></div>
    <dc-cell title="上座率趋势" class="bg-white mt20"></dc-cell>
    <div class="common-chart" id="upperTrend"></div>
    <dc-cell title="桌均趋势" class="bg-white mt20"></dc-cell>
    <div class="common-chart" id="averageTrend"></div>
  </div>
</template>
<script>
  import cell from '@/components/cell';
  import api from '@/common/api/storeCondition';
  import {initLine} from '@/common/echarts/line';
  export default {
    data () {
      return {
        lineData: {},
        seriesAll: {
          seriesX: ['0'],
          series: [{name: '', type: 'line', data: ['0']}, {name: '', type: 'line', data: ['0']}, {name: '', type: 'line', data: ['0']}, {name: '', type: 'line', data: ['0']}]
        },
        line: null,
        line1: null,
        line2: null,
        line3: null
      };
    },
    components: {
      'dc-cell': cell
    },
    props: {
      timeFlag: [String, Number],
      beginTime: Number,
      endTime: Number
    },
    watch: {
      beginTime () {
        this.buildChart();
      }
    },
    mounted () {
      this.line = initLine('#levelTrend');
      this.initLevelLine();
      this.line1 = initLine('#openTrend');
      this.initOpenRate();
      this.line2 = initLine('#upperTrend');
      this.initUpperRate();
      this.line3 = initLine('#averageTrend');
      this.initAverage();
      this.buildChart();
    },
    activated () {
      this.dataInit();
      this.buildChart();
    },
    methods: {
      //数据初始化
      dataInit () {
        this.lineData = {};
        this.seriesAll = {
          seriesX: ['0'],
          series: [{name: '', type: 'line', data: ['0']}, {name: '', type: 'line', data: ['0']}, {name: '', type: 'line', data: ['0']}, {name: '', type: 'line', data: ['0']}]
        };
        this.initLevelLine();
        this.initOpenRate();
        this.initUpperRate();
        this.initAverage();
      },
      chartData (list, itemName, itemName1, itemName2, itemName3, type) {
        let series = [];
        let seriesX = [];
        list.forEach(function (item, index) {
          if (item[itemName]) {
            seriesX = [];
            series[index] = {};
            series[index].name = item[itemName1];
            series[index].type = type;
            series[index].areaStyle = {normal: {}};
            series[index].data = [];
            item[itemName].forEach(function (m) {
              series[index].data.push(m[itemName2]);
              seriesX.push(m[itemName3]);
            });
          }
        });
        return {
          series: series,
          seriesX: seriesX
        };
      },
      buildChart () {
        let data = {
          timeFlag: this.timeFlag,
          beginTime: this.beginTime,
          endTime: this.endTime
        };
        this._getweek(data);
      },
      _getweek (data) {
        api.getStoreLine(data).then(res => {
          this.lineData = res;
          if (this.lineData.length > 0) {
            this.seriesAll = this.chartData(this.lineData, 'list', 'chartName', 'num', 'date', 'line');
          }
          this.initLevelLine();
          this.initOpenRate();
          this.initUpperRate();
          this.initAverage();
        });
      },
      //坪效趋势
      initLevelLine () {
        this.line.hideLoading();
        this.line.setOption({
          xAxis: {
            data: this.seriesAll.seriesX
          },
          yAxis: [
            {
              type: 'value',
              axisLabel: {
                formatter: '{value}K'
              }
            }
          ],
          series: this.seriesAll.series[0]
        });
      },
      //开台率趋势
      initOpenRate () {
        this.line1.hideLoading();
        this.line1.setOption({
          xAxis: {
            data: this.seriesAll.seriesX
          },
          yAxis: [
            {
              type: 'value',
              axisLabel: {
                formatter: '{value}K'
              }
            }
          ],
          series: this.seriesAll.series[1]
        });
      },
      //上座率趋势
      initUpperRate () {
        this.line2.hideLoading();
        this.line2.setOption({
          xAxis: {
            data: this.seriesAll.seriesX
          },
          yAxis: [
            {
              type: 'value',
              axisLabel: {
                formatter: '{value}K'
              }
            }
          ],
          series: this.seriesAll.series[2]
        });
      },
      //桌均趋势
      initAverage () {
        this.line3.hideLoading();
        this.line3.setOption({
          xAxis: {
            data: this.seriesAll.seriesX
          },
          yAxis: [
            {
              type: 'value',
              axisLabel: {
                formatter: '{value}K'
              }
            }
          ],
          series: this.seriesAll.series[3]
        });
      }
    }
  };
</script>
<style lang="scss" scoped>

</style>
